<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础-全局注册</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    <!--v-slot:todo="{ todo }"绑定的是todo插槽里的名字-->
    <todo-list >
        <template v-slot:todo="{ todo }">
            <span v-if="todo.isComplete">✓</span>
            {{ todo.text }}
        </template>
    </todo-list>

    <!--v-slot:todo="{todo:t} t是别名-->
    <todo-list v-slot:todo="{todo:t}">
        <span v-if="t.isComplete">✓</span>
        {{ t.text }}
    </todo-list>
</div>


<div id="app1">
    <!--v-slot:todo="{ todo }"绑定的是todo插槽里的名字-->
    <todo-list >
        <template v-slot:todo="{ todo }">
            <span v-if="todo.isComplete">✓</span>
            {{ todo.text }}
        </template>
    </todo-list>

</div>

<!--循环列表-->
<template id="child">
    <ul>
        <li v-for="todo in list" v-bind:key="todo.id">
            <!--{{todo.text}}-->

            <!--定义插槽绑定todo在外面-->
            <slot v-bind:todo="todo" name="todo">
                {{todo.text}}
            </slot>
        </li>
    </ul>
</template>

<script>
    Vue.component("todo-list",{

        data:function () {
            return {
                list:[
                    {id:0,text:"java",isComplete:true},
                    {id:1,text:"mySql",isComplete:false},
                    {id:2,text:"javascript",isComplete:true},
                    {id:3,text:"vue",isComplete:true},
                    {id:4,text:"php",isComplete:false},
                ]
            }
        },
        template:"#child",
    });
    var app= new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })


    var app1= new Vue({
        el:'#app1',
        data:{

        },
        methods:{

        }
    })
</script>
</body>
</html>
